<template>
  <div class="map-con" ref="mapBox"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive, toRefs, ref, useContext, watch } from 'vue'
import axios from '../api'
import axiosOg from 'axios'
import WebSocketSerivce from '../utils/socket_service'
import { getProvinceMapInfo } from '../utils/map_utils'
import { useStore } from 'vuex'
declare const echarts
export default defineComponent({
  name: 'Map',
  setup() {
    const store = useStore()
    let mapChart
    let data
    const mapBox = ref<HTMLElement>(null)
    
    watch(() => store.state.theme, theme => {
        mapChart.dispose()  // 销毁原来的图表
        initChart()
        screenAdapter()
        updateChart()
      })
    // 初始化图表
    const initChart = async () => {
      mapChart = echarts.init(mapBox.value,store.state.theme)
      const chinaJson = await axiosOg.get('http://localhost:8080/static/map/china.json')
      echarts.registerMap('chinaMap', chinaJson.data)
      const initOption = {
        title: {
          text: '▎商家分布',
          left: 20,
          top: 20
        },
        geo: {
          type: 'map',
          map: 'chinaMap',
          top: '5%',
          bottom: '5%',
          itemStyle: {
            areaColor: '#2e72bf',
            borderColor: '#333'
          }
        },
        legend: {
          left: '5%',
          bottom: '5%',
          orient: 'vertical'  //图例方向 垂直
        }  
      }
      mapChart.setOption(initOption)
      // 监听点击事件
      mapChart.on('click',handleMapClick)
      mapChart.on('dblclick', handleMapDblclick)
    }
    // 获取数据渲染图表
    const getData = res => {
      // const { data : res } = await axios.get('map')
      data = res
      updateChart()
    }
    // 更新图表
    const updateChart = () => {  
      const legendArr = data.map(item => item.name)
      const scatterData = data.map(item => {
        return {
            data: item.children,  // 散点图数据
            name: item.name,
            type: 'effectScatter',
            coordinateSystem: 'geo', // 指明散点使用的坐标系统 是geo的系统 不然散点出不来
            rippleEffect: {
              brushType: "stroke", // 空心涟漪
              scale: 7
            }
          }
      })
      const updateOption = {
        series: scatterData,
        legend: {
          data: legendArr
        }
        
      }
      mapChart.setOption(updateOption)
    }
    // 屏幕自适应
    const screenAdapter = () => {
      const titleFontSize = mapBox.value.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        legend: {
        itemWidth: titleFontSize / 2,
        itemHeight: titleFontSize / 2,
        itemGap: titleFontSize / 2,
        textStyle: {
          fontSize: titleFontSize / 2
        }
      }
      }
      mapChart.setOption(adapterOption)
      mapChart.resize()
    }

    // 单击
    const handleMapClick = async e =>{
      const provinceInfo = getProvinceMapInfo(e.name)
      if(!provinceInfo.key) return
      const res = await axiosOg.get('http://localhost:8080' + provinceInfo.path)
      echarts.registerMap('provinceMap', res.data)
      const option = {
        geo: {
          map: 'provinceMap',
        },
      }
      mapChart.setOption(option)
    }
    // 双击
    const handleMapDblclick = () => {
      const option = {
        geo: {
          map: 'chinaMap',
        }
      }
      mapChart.setOption(option)
    }

    const { expose } = useContext()
    expose({
      screenAdapter
    })

    onMounted(async () => {
      WebSocketSerivce.instance.registerCallBack('mapData', getData)
      initChart()
      // await getData()
      WebSocketSerivce.instance.send({
        action: 'getData',
        socketType: 'mapData',
        chartName: 'map',
        value: false
      })
      window.addEventListener('resize', screenAdapter)
      screenAdapter()
    })

    onUnmounted(() => {
      WebSocketSerivce.instance.unRegisterCallBack('mapData')
      window.removeEventListener('resize', screenAdapter)
    })

    return {
      mapBox
    }
  }

})
</script>
<style lang="less" scoped>
.map-con{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
